<!-- 题库使用情况 -->
<script setup lang='ts'>
import { reactive, nextTick  } from 'vue';
import { tableKeyList, dictionary } from './conf'
import { TableItemType } from '../../types'

const data = reactive({
  list: [],
  getData: false,
  totalNum: 0,
  params: {},
  activeItem: {} as TableItemType,
  previewDialog: false,
})

const showConditionDialog = async (tableItem: TableItemType) => {
  data.previewDialog = true;
  data.activeItem = tableItem;
  
  // 等待 弹窗内组件渲染完毕，在获取列表数据
  await nextTick()
  data.getData = true;
}

defineExpose({
  showConditionDialog
})
</script>

<template>
  <div>
    <el-dialog
      v-model="data.previewDialog"
      title="使用情况"
      width="50%"
    >
      <p class="_mb10">已被 {{ data.totalNum }} 张试卷使用</p>
      <ListView
        :tableKeyList="tableKeyList"
        :list="data.list"
        :dictionary="dictionary"
      /> 
      <Pagination
        url="/training.exam.api/pool/overview"
        v-model:list="data.list"
        v-model:getData="data.getData"
        :params="{...data.activeItem}"
        listKeyName="refPaper"
        @setTotalNum="(num: number) => (data.totalNum = num)"
      ></Pagination>
    </el-dialog>
  </div>
</template>

<style scoped></style>